<template>
  <div>
    <!-- 基本信息 -->
    <div class="base">
      <a-collapse v-model:activeKey="activeKey" expandIconPosition="end">
        <a-collapse-panel key="1" header="基本信息">
          <div class="jian">
            <a-descriptions :column="2">
              <a-descriptions-item label="运输任务编号">{{ data.id }}</a-descriptions-item>
              <a-descriptions-item label="车牌号码">{{ truck.licensePlate }}</a-descriptions-item>
              <a-descriptions-item label="调度机构"> {{ startAgency.name }} </a-descriptions-item>
              <a-descriptions-item label="起始地"> {{ startAgency.name }} </a-descriptions-item>
              <a-descriptions-item label="目的地">{{ endAgency.name }}</a-descriptions-item>
            </a-descriptions>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <div class="base">
      <a-collapse v-model:activeKey="activeKey" expandIconPosition="end">
        <a-collapse-panel key="2" header="任务轨迹">
          <div class="jian">
            <a-descriptions :column="2">
              <a-descriptions-item label="车牌号">{{ truck.licensePlate }}</a-descriptions-item>
              <a-descriptions-item label="司机">{{
                truck.driverName ? truck.driverName : '司机'
              }}</a-descriptions-item>
              <a-descriptions-item label="计划发车时间">
                {{ data.planDepartureTime }}
              </a-descriptions-item>
              <a-descriptions-item label="实际发车时间">
                {{ data.actualDepartureTime ? data.actualDepartureTime : '暂未发车' }}
              </a-descriptions-item>
              <a-descriptions-item label="计划到达时间">{{
                data.planArrivalTime
              }}</a-descriptions-item>
              <a-descriptions-item label="实际到达时间">{{
                data.actualArrivalTime ? data.actualArrivalTime : '暂未到达'
              }}</a-descriptions-item>
            </a-descriptions>
          </div>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <!-- 货品信息 -->
    <div class="base">
      <a-collapse v-model:activeKey="activeKey" expandIconPosition="end">
        <a-collapse-panel key="3" header="货品信息">
          <a-table :columns="columns" :data-source="datalist" :pagination="false">
            <template #bodyCell="{ column, text, record }">
              <template v-if="column.dataIndex === ['transportOrders', 'id']">
                {{ text.name }}
              </template>
              <!-- 操作 -->
              <template v-if="column.dataIndex === 'look'">
                <a-button
                  @click="
                    $router.push(
                      `/WayLook?id=${record.id}&?orderId=${record.orderId}&type=运输管理`,
                    )
                  "
                  type="link"
                  >查看详情</a-button
                >
              </template>
            </template>
          </a-table>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <!-- 照片 -->
    <div class="base">
      <a-collapse v-model:activeKey="activeKey" expandIconPosition="end">
        <a-collapse-panel key="4" header="交付照片">
          <a-descriptions :column="2">
            <a-descriptions-item label="货品照片">
              <img
                src="https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/282b9ee4-9edc-40e9-b365-84dec2cce429.png"
                style="width: 212px; height: 159px; border-radius: 4px"
                alt=""
              />
            </a-descriptions-item>
            <a-descriptions-item label="凭证照片"
              ><img
                src="https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/282b9ee4-9edc-40e9-b365-84dec2cce429.png"
                style="width: 212px; height: 159px; border-radius: 4px"
                alt=""
            /></a-descriptions-item>
          </a-descriptions>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <!-- 照片 -->
    <div class="base">
      <a-collapse v-model:activeKey="activeKey" expandIconPosition="end">
        <a-collapse-panel key="5" header="交付照片">
          <a-descriptions :column="2">
            <a-descriptions-item label="提货照片">
              <img
                src="https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/282b9ee4-9edc-40e9-b365-84dec2cce429.png"
                style="width: 212px; height: 159px; border-radius: 4px"
                alt=""
              />
            </a-descriptions-item>
            <a-descriptions-item label="凭证照片"
              ><img
                src="https://yjy-slwl-oss.oss-cn-hangzhou.aliyuncs.com/282b9ee4-9edc-40e9-b365-84dec2cce429.png"
                style="width: 212px; height: 159px; border-radius: 4px"
                alt=""
            /></a-descriptions-item>
          </a-descriptions>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { getTransportTaskManagerByIdAPI } from '@/services/transportManager'
const route = useRoute()
// 接受参数ID
const id = ref(0)
const getId = () => {
  id.value = route.query.id
}
getId()
// console.log(route.query.id)

// 数据
const data = ref({})
// 车
const truck = ref({})
// 起始
const startAgency = ref({})
// 结束
const endAgency = ref({})
// 获取信息详情
const getTransportManagerById = async () => {
  const res = await getTransportTaskManagerByIdAPI(route.query.id)
  console.log(res)
  data.value = res.data
  truck.value = res.data.truck
  endAgency.value = res.data.endAgency
  startAgency.value = res.data.startAgency
  datalist.value = res.data.transportOrders
}
getTransportManagerById()
// 货品信息
const datalist = ref([])
const columns = ref([
  {
    title: '序号',
    align: 'center',
    // 🚨注意：表格序号自动递增，分页后也不影响
    width: 60,
    customRender: ({ index }) => index + 1,
  },
  {
    title: '运单编号',
    dataIndex: 'id',
    width: 155,
  },
  {
    title: '下单时间',
    dataIndex: 'created',
    width: 180,
  },
  {
    title: '发件人姓名',
    dataIndex: ['order', 'senderName'],
    width: 140,
  },
  {
    title: '发件人电话',
    dataIndex: ['order', 'senderPhone'],
    width: 100,
  },
  {
    title: '发件人地址',
    dataIndex: ['order', 'senderAddress'],
    width: 100,
  },
  {
    title: '货品数量',
    dataIndex: '',
    width: 100,
  },
  {
    title: '操作',
    dataIndex: 'look',
    width: 100,
  },
])
// 默认展开所有折叠面板
const activeKey = ref(['1', '2', '3', '4', '5'])
</script>
<style scoped>
.top {
  background-color: #fff;
  padding: 20px;
}
.base {
  margin-top: 30px;
}
.transport {
  width: 100%;
  padding-right: 600px;
}
.jian {
  display: flex;
  padding: 40px;
}
.hezi {
  position: relative;
  background-color: #f4f8fc;
  padding: 15px;
  width: 280px;
  height: 100px;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-left: 50px;
}
.hezi::before {
  content: '';
  position: absolute;
  top: -60px; /* 调整箭头位置 */
  left: 50%;
  margin-left: -30px; /* 调整箭头位置 */
  border-width: 30px; /* 调整箭头大小 */
  border-style: solid;
  border-color: transparent transparent #f4f8fc transparent;
}
.li {
  margin: 4px;
}
.sp {
  margin-right: 28px;
}
</style>
